<template>
    <div id="card">
        <div id="Left">
            <p id="title">{{list.title}}</p>
            
            <el-tooltip class="item" effect="dark" :content="list.path" placement="bottom">
            <p id="path">{{list.path}}</p>
            </el-tooltip>
        </div>
        <div id="Right">
            <i class="el-icon-more"></i>
            <p id="byte">9.9MB</p>
            <el-button plain id="edit-btn" icon="el-icon-edit" @click="clickd(list.path)">编辑</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'item',
    props: ["list"],
    data(){
        return {};
    },
    methods: {
        clickd(path){
            alert(path);
        },
    }

}
</script>
<style lang="scss" scoped>
* {
    transition: .3s;
}
#card {
    display: flex;
    width: calc(100% - 10px);
    height: 140px;
    background-color: rgba($color: #fff, $alpha: .3);
    border-radius: 6px;
    margin: 0px 0px 20px 5px;
    padding: 11px 11px;
    
    box-sizing: border-box;
    justify-content: space-between;
    &:hover {
        box-shadow: 0px 0px 4px  2px #fff;
    }
    #Left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
        #title {
            color: #000;
            margin-top: 6px;
            // text-shadow: 1px 1px 7px 2px #000;
            font-size: 2.6rem;
            
        }
        #path {
            width: calc(100% - 40px);
            color: #fff;
            white-space:nowrap;
            font-size: 1.7rem;
            margin-bottom: 6px;
        }
    }
    #Right {
        justify-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 3rem;
        i {
            margin: -5px 0px 0px 0px;
            
        }
        #byte {
            font-size: 1.3rem;
            margin: -10px 0 0px 0px;
            box-sizing: content-box;
            display: inline-block;
        }
         
            
        #edit-btn {
            margin-top: 15px;
        }
    }
}
</style>